<template>
  <div id="quotationDetail">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true"></Header>
    <div class="rootMain" v-show="!!trade">
      <div class="detail-header">
        <h2 v-if="trade.tradeState ==1">待成交</h2>
        <h2 v-else-if="trade.tradeState ==2">完全成交</h2>
        <h2 v-else-if="trade.tradeState==3">已撤销</h2>
        <span>{{trade.createTime}}</span>
      </div>
      <div class="detail-con">
        <div class="dc-header">
          <h4>
            <b class="bg-up" v-if="trade.tradeType==1">买</b>
            <b class="bg-down" v-else>卖</b>
            <span>
              {{bi}}
              <small>/{{biz}}</small>
            </span>
          </h4>
          <span class="trade" @click="goTrade">
            去交易
            <van-icon name="arrow   " />
          </span>
        </div>
        <div class="dc-p">
          <p>
            <span>委托类型</span>限价委托
          </p>
          <p>
            <span>已成交量</span>
            {{trade.tradeState ==2?trade.tradedVc:0}}
          </p>
          <p>
            <span>委托总量</span>
            {{trade.vc}}
          </p>
          <p>
            <span>成交均价</span>
            {{trade.tradedCnn==0?"0":(trade.tradedCnn/trade.tradedVc).toFixed(2)}}
          </p>
          <p>
            <span>委托价格</span>
            {{trade.price}}
          </p>
          <p>
            <span>委托金额</span>
            {{(trade.price*trade.tradedVc).toFixed(2)}}
          </p>
        </div>
      </div>
      <div class="detail-list" v-if="!$route.query.s">
        <h2>成交明细</h2>
        <div class="dl-list">
          <div class="dl-item">
            <h4>时间</h4>
            <h4>成交价</h4>
            <h4>成交量</h4>
          </div>
          <div class="dl-item" v-for="(e,i) in list" :key="i">
            <span>{{e.createTime}}</span>
            <span>{{e.extraData.deal.price}}</span>
            <span>{{e.extraData.deal.amount}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import Header from "@/components/header";
import { mapMutations } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      id: "",
      trade: "",
      list: "",
      bi: "VC",
      biz: "CNN"
    };
  },
  created() {
    this.changeTitle("委托详情");
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.id = this.$route.query.id;
    Services.getTradeRecordList({
      token: this.loginToken,
      tradeId: this.id
    }).then(res => {
      console.log(res);
      if (res.code == "0000") {
        this.trade = res.trade;
        this.list = res.list;
      } else {
        Toast(res.msg);
      }
    });
  },
  components: {
    Header
  },
  computed: {},
  methods: {
    ...mapMutations(["changeTitle"]),
    goTrade() {
      if (!!this.$route.query.s) {
        this.$router.push(`/quotationTradeHuobi?s=${this.$route.query.s}&t=1`);
      } else {
        this.$router.push(`/quotationTrade`);
      }
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#quotationDetail {
  height: 100%;
  .rootMain {
    height: calc(100% - 0.88rem);
    top: 0.88rem;
    overflow-y: auto;

    .detail-header {
      margin-top: 0.3rem;
      padding: 0.5rem 0.3rem;
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h2 {
        font-size: 0.36rem;
        color: #40404c;
      }
      span {
        font-size: 0.22rem;
        color: #c5cfd5;
      }
    }
    .detail-con {
      .dc-header {
        padding: 0 0.3rem;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 0.85rem;
        border-bottom: 1px solid #c5cfd5;
        h4 {
          display: flex;
          align-items: center;
          b {
            width: 0.4rem;
            height: 0.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0.04rem;
            color: #fff;
          }
          span {
            margin: 0 0.3rem 0 0.2rem;
            font-size: 0.32rem;
            small {
              font-size: 0.28rem;
              opacity: 0.8;
            }
          }
          label {
            font-size: 0.2rem;
            color: #c5cfd5;
          }
        }
        .qbbl-btn {
          width: 1rem;
          height: 0.55rem;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.26rem;
          background: transparent;
          color: #1f3f59;
          border: 1px solid #1f3f59;
          border-radius: 1rem;
        }
        .trade {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #1882d4;
        }
      }
      .dc-p {
        padding: 0.3rem;
        background: #fff;
        p {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 0.45rem;
        }
      }
    }
    .detail-list {
      margin-top: 0.3rem;
      background: #fff;
      h2 {
        padding: 0 0.3rem;
        display: flex;
        align-items: center;
        height: 0.85rem;
        font-size: 0.3rem;
        border-bottom: 1px solid #c5cfd5;
      }
      .dl-list {
        padding: 0.3rem;
        div {
          display: flex;
          align-items: center;
          height: 0.75rem;
          text-align: center;
          h4,
          span {
            width: 33.333333%;
          }
          h4 {
            font-size: 0.28rem;
          }
        }
      }
    }
  }
}
</style>